<template>
  <span class="collect-operate">
    <a-button
      type="primary"
      :disabled="collectSelectedDisabled"
      @click="collectOperateHandle(0, true)"
      v-if="collectSelectedVisible"
      >采集选中</a-button
    >
    <a-button
      :type="btnType"
      :disabled="disabled"
      v-for="item in collectOperateBtnGroup"
      :key="item.value"
      @click="collectOperateHandle(item.value, false)"
      >{{ item.label }}</a-button
    >
    <CollectOperateModal ref="collectOperateModal" :collectOperateType="collectOperateType" :selectFlag="selectFlag" />
  </span>
</template>

<script lang="ts" setup name="CollectOperate">
import CollectOperateModal from './components/CollectOperateModal.vue'
import { computed, provide, ref, toRefs, watch } from 'vue'
import { selectedRowKeys } from '../../hooks/useTable'
import { COLLECT_TIME_TYPE } from '@/stores/modules/collect-manage/select-data-source'
import type { CollectFormBindType } from '../../public-type'
import type { CollectManageRequest } from '@/apis/modules/collectManage'
import apis from '@/apis'
import useStore from '@/stores'
const { collectManage } = useStore()
const { resource_type } = collectManage
type BtnType = 'link' | 'primary'
type Props = {
  btnType?: BtnType
  disabled?: boolean
  rowData?: Record<string, any>
  collectId?: string
}
const props = withDefaults(defineProps<Props>(), {
  btnType: 'primary'
})
const { rowData = {} } = props
const { btnType, disabled, collectId } = toRefs(props)
console.log('rowData: ', rowData)
const { id, resourceType } = rowData

// 采集选中按钮
const collectSelectedVisible = computed(() => btnType.value === 'primary')
const collectSelectedDisabled = computed(() => {
  console.log('disabled123', disabled?.value)
  if (disabled?.value) {
    return true
  } else {
    return !selectedRowKeys.value?.length
  }
})
watch(
  () => disabled?.value,
  () => {
    console.log(disabled?.value, 'disabled?.value')
  }
)
// 其他按钮组
const collectOperateBtnGroup = COLLECT_TIME_TYPE

// 采集操作 Modal
const collectOperateModal = ref()
console.log('collectOperateModal: ', collectOperateModal)
let collectOperateType = ref<number | null>(null)
let selectFlag = ref<boolean>(false)
const collectOperateHandle = (type: any, flag: boolean) => {
  console.log('type: ', type)
  collectOperateType.value = type
  selectFlag.value = flag
  console.log(collectOperateType.value, 'collectOperateType.value2122')
  collectOperateModal.value.visible = true
  getBindTableData()
}

// 获取绑定分类 tableData
let bindData = ref<CollectFormBindType[]>([])
const getBindTableData = () => {
  const { getSourceClassification } = apis.collectManage
  const { collect_addr, seed_key } = rowData
  const params: CollectManageRequest['collectManager.resourceClassification'] = {
    addr: collect_addr,
    key: seed_key,
    collect_id: id || collectId?.value,
    collect_scope: collectOperateType.value as number
  }
  console.log('params: ', params)
  getSourceClassification(params).then((res: any) => {
    bindData.value = res.list
  })
}

// provide
provide('id', id || collectId?.value)
provide('resourceType', resourceType || resource_type)
provide('bindData', bindData)
</script>

<style lang="less" scoped>
.collect-operate {
  .ant-btn-link {
    padding: 0 8px;
  }
  .ant-btn-primary {
    margin-left: 16px;
  }
}
</style>
